slot

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-11-04 12:41:13

2167 瀏覽

分享至

菜菜菜的 Vue 30天 - Day20

前幾章介紹了 component 的使用及宣告方式，另外 component 還有一個好用的東西 slot。

原本之前介紹 component 時都用以下的方式做使用：

<body>
  <div id="app">
    <button-add-count></button-add-count>
  </div>
</body>

如上，我們能夠像使用 HTML tags 一樣使用，這樣雖然我們能夠重複的使用程式碼，但是 component tags 裡面我們不能像 HTML tags 一樣裡面再放入其他元素。我們可能會遇到不同頁面下我需要使用同一個 component 做不同的渲染，或是我們可能需要一個 modal 的 component 但是在不同的使用情境下 modal 內的內容不同。

我們這章要介紹的 slot 就能夠讓我們上述所說的那些需求能夠達成。

slot

slot 的翻譯是插槽，顧名思義就是在 component 內開一個插槽，讓我們能夠在指定的地方再放入我們想要放入的東西。

slot 的使用方式分為 3 種：

Single Slots
Named Slots
Scoped Slots

Single Slots

好的，首先要先來介紹的是 slot 最基本的用法

我們先以這個 component 來說：

<button-add-count> +1 </button-add-count>

我們在這個 button 的 component 內寫了一個 +1

但是原本 compoent 內是不允許再添加其他東西的，那我們就來把它開一個洞！！

components: {
  'button-add-count': {
    template: `<button><slot></slot></button>`
  }
}

這樣我們就能在不同地方使用這個 component 做不同的炫染，另外我們 slot 裡面還可以寫預設的，例如：

我可能大部分的 button 都是要顯示 "確定"，所以我在 slot 裡面寫入預設的 "確認"。

template: `<button><slot>確定</slot></button>`

接下來我可能有個地方使用這 component 是要顯示送出，我就在 component tags 裡面寫送出。

<button-common> 送出 </button-common>

slot 會依據在父層 component tags 內是否有其他內容，如果有則顯示，如果沒有就顯示 slot 內預設的內容。

Named Slots

接下來我們可能會遇到我需要多個插槽來放置我要渲染之內容，這時候我們就需要具名插槽(named slots)來幫我們執行這件事情，我們就能依據 name 來指定我要放置的位置。

下面就用實際的範例來解說。

今天我們要製作一個統一的 layout component，內容大致如下：

<div class="container">
  <header>
  </header>
  
  <main>
  </main>
  
  <footer>
  </footer>
</div>

我們會在 header、main 以及 footer 內放入不同的內容，我們一樣使用 slot 來做。

如果要放置多個 slot 就需要將他們具名，這樣才知道哪些內容該放置哪個位置，下面就來講實際的用法吧。

我們可以使用 2 種方式來為 slot 具名：

HTML tags 上 slot 屬性

<layout>
    <h1 slot="header">安迪小屋</h1>
    <p>歡迎大家來到安迪小屋～</p>
    <p>請隨便逛逛！！</p>
    <p slot="footer">我就是 footer</p>
</layout>

使用 template 包起來

<layout>
    <template slot="header">
        <h1>安迪小屋</h1>
    </template>
    <p>歡迎大家來到安迪小屋～</p>
    <p>請隨便逛逛！！</p>
    <template slot="footer">
        <p>我就是 footer</p>
    </template>
</layout>

父層沒有具名的內容就會全部歸類在 component 內沒有具名的 slot 顯示。

接下來在 component 內的部分，我們就需要再 slot 標上 name 讓相對應的內容能夠正確的顯示在指定位置。

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  
  <main>
    <slot></slot>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Scoped Slots

最後一個是 Scoped Slots，這個就是主要使用在資料傳遞，跟 props 有一點點像，接下來看怎麼使用吧～

使用 Scoped Slots 需要使用 template 包起來，並在 tags 上加上 scope="props"屬性，props 就會是要傳入的資料，如下：

<layout>
  <template slot="header" scope="props">
    <span>{{props.text}}</span>
  </template>
  <template slot="footer" scope="props">
    <span>{{props.text}}</span>
  </template>
</layout>

<div class="container">
  <header>
    <slot name="header" text="I am header"></slot>
  </header>
  <footer>
    <slot name="footer" text="I am footer"></slot>
  </footer>
</div>

以上就是 slot 的介紹。

下一章會再介紹其他內容喲～